<template>
  <div>
    <svg id="svg1">

    </svg>
    <svg id="svg2">

    </svg>
  </div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "s4_join",
  metaInfo: {
    title: "join用法",
  },
  data: function() {
    return {
      data: []
    }
  },
  created() {
  },
  mounted() {
    let width = 480

    let svg1 = d3.select("#svg1")
        .attr("width", width)
        .attr("height", 33)
        .attr("viewBox", `0 -20 ${width} 33`)

    svg1.selectAll("text")
        .data(['a','b','c'])
        .join("text")
        .attr("x", (d, i) => i * 16)
        .text(d => d);

    let svg2 = d3.select("#svg2")
        .attr("width", width)
        .attr("height", 33)
        .attr("viewBox", `0 -20 ${width} 33`);

    let randomLetters = () => {
      let result = []
      let s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
      for ( let i = 0; i < s.length; i++ )
        result.push(s.charAt(Math.floor(Math.random() * s.length)))
      return result
    }
    setInterval(() => {
      const t = d3.transition()
          .duration(750)

      svg2.selectAll("text")
          .data(randomLetters(), d => d)
          .join(
              enter => enter.append("text")
                  .attr("fill", "green")
                  .attr("x", (d, i) => i * 16)
                  .attr("y", -30)
                  .text(d => d)
                  .call(enter => enter.transition(t)
                      .attr("y", 0)),
              update => update
                  .attr("fill", "black")
                  .attr("y", 0)
                  .call(update => update.transition(t)
                      .attr("x", (d, i) => i * 16)),
              exit => exit
                  .attr("fill", "brown")
                  .call(exit => exit.transition(t)
                      .attr("y", 30)
                      .remove())
          )
    }, 2500)
  }
}
</script>

<style scoped>

</style>
